<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KB310 ChatRoom</title>
    <link rel="stylesheet" href="./styles/main.css">
    <link rel="stylesheet" href="./styles/icono.min.css">
</head>
<body>
    <header></header>
    <img id="bg-blur" src="./images/background.jpg">
    <main id="login">
        <label for="">Username</label>
        <input type="text">
        <p> * Warning: Invalid Username, Please Pick Another One * </p>
        <div>
            <button id="login">登录</button>
        </div>
    </main>
    <main id="logined">
        <section id="control-panel">
            <div id="user-info">
                <img class="logo">
                <span></span>
            </div>
            <div id="search">
                <input type="search">
            </div>
            <div id="user-list">
                <ul></ul>
            </div>
        </section>
        <section id="chat-panel">
            <div id="chat-user"></div>
            <section id="chat-message">
                <div id="img-preview"></div>
            </section>
            <div id="send-message">
                <div class="utils">
                    <i class="icono-smile"></i>
                </div>
                <div class="icons">
                    <img class="icon" src="./images/faces/1.gif" alt="1.gif">
                    <img class="icon" src="./images/faces/2.gif" alt="2.gif">
                    <img class="icon" src="./images/faces/3.gif" alt="3.gif">
                    <img class="icon" src="./images/faces/4.gif" alt="4.gif">
                    <img class="icon" src="./images/faces/5.gif" alt="5.gif">
                    <img class="icon" src="./images/faces/6.gif" alt="6.gif">
                    <img class="icon" src="./images/faces/7.gif" alt="7.gif">
                    <img class="icon" src="./images/faces/8.gif" alt="8.gif">
                    <img class="icon" src="./images/faces/9.gif" alt="9.gif">
                    <img class="icon" src="./images/faces/10.gif" alt="10.gif">
                    <img class="icon" src="./images/faces/11.gif" alt="11.gif">
                    <img class="icon" src="./images/faces/12.gif" alt="12.gif">
                    <img class="icon" src="./images/faces/13.gif" alt="13.gif">
                    <img class="icon" src="./images/faces/14.gif" alt="14.gif">
                    <img class="icon" src="./images/faces/15.gif" alt="15.gif">
                    <img class="icon" src="./images/faces/16.gif" alt="16.gif">
                    <img class="icon" src="./images/faces/17.gif" alt="17.gif">
                    <img class="icon" src="./images/faces/18.gif" alt="18.gif">
                    <img class="icon" src="./images/faces/19.gif" alt="19.gif">
                    <img class="icon" src="./images/faces/20.gif" alt="20.gif">
                    <img class="icon" src="./images/faces/21.gif" alt="21.gif">
                    <img class="icon" src="./images/faces/22.gif" alt="22.gif">
                    <img class="icon" src="./images/faces/23.gif" alt="23.gif">
                    <img class="icon" src="./images/faces/24.gif" alt="24.gif">
                    <img class="icon" src="./images/faces/25.gif" alt="25.gif">
                    <img class="icon" src="./images/faces/26.gif" alt="26.gif">
                    <img class="icon" src="./images/faces/27.gif" alt="27.gif">
                    <img class="icon" src="./images/faces/28.gif" alt="28.gif">
                    <img class="icon" src="./images/faces/29.gif" alt="29.gif">
                    <img class="icon" src="./images/faces/30.gif" alt="30.gif">
                    <img class="icon" src="./images/faces/31.gif" alt="31.gif">
                    <img class="icon" src="./images/faces/32.gif" alt="32.gif">
                    <img class="icon" src="./images/faces/33.gif" alt="33.gif">
                    <img class="icon" src="./images/faces/34.gif" alt="34.gif">
                    <img class="icon" src="./images/faces/35.gif" alt="35.gif">
                    <img class="icon" src="./images/faces/36.gif" alt="36.gif">
                    <img class="icon" src="./images/faces/37.gif" alt="37.gif">
                    <img class="icon" src="./images/faces/38.gif" alt="38.gif">
                    <img class="icon" src="./images/faces/39.gif" alt="39.gif">
                    <img class="icon" src="./images/faces/40.gif" alt="40.gif">
                    <img class="icon" src="./images/faces/41.gif" alt="41.gif">
                    <img class="icon" src="./images/faces/42.gif" alt="42.gif">
                    <img class="icon" src="./images/faces/43.gif" alt="43.gif">
                    <img class="icon" src="./images/faces/44.gif" alt="44.gif">
                    <img class="icon" src="./images/faces/45.gif" alt="45.gif">
                    <img class="icon" src="./images/faces/46.gif" alt="46.gif">
                    <img class="icon" src="./images/faces/47.gif" alt="47.gif">
                    <img class="icon" src="./images/faces/48.gif" alt="48.gif">
                    <img class="icon" src="./images/faces/49.gif" alt="49.gif">
                    <img class="icon" src="./images/faces/50.gif" alt="50.gif">
                    <img class="icon" src="./images/faces/51.gif" alt="51.gif">
                    <img class="icon" src="./images/faces/52.gif" alt="52.gif">
                    <img class="icon" src="./images/faces/53.gif" alt="53.gif">
                    <img class="icon" src="./images/faces/54.gif" alt="54.gif">
                    <img class="icon" src="./images/faces/55.gif" alt="55.gif">
                    <img class="icon" src="./images/faces/56.gif" alt="56.gif">
                    <img class="icon" src="./images/faces/57.gif" alt="57.gif">
                    <img class="icon" src="./images/faces/58.gif" alt="58.gif">
                    <img class="icon" src="./images/faces/59.gif" alt="59.gif">
                    <img class="icon" src="./images/faces/60.gif" alt="60.gif">
                    <img class="icon" src="./images/faces/61.gif" alt="61.gif">
                    <img class="icon" src="./images/faces/62.gif" alt="62.gif">
                    <img class="icon" src="./images/faces/63.gif" alt="63.gif">
                    <img class="icon" src="./images/faces/64.gif" alt="64.gif">
                    <img class="icon" src="./images/faces/65.gif" alt="65.gif">
                    <img class="icon" src="./images/faces/66.gif" alt="66.gif">
                    <img class="icon" src="./images/faces/67.gif" alt="67.gif">
                    <img class="icon" src="./images/faces/68.gif" alt="68.gif">
                    <img class="icon" src="./images/faces/69.gif" alt="69.gif">
                    <img class="icon" src="./images/faces/70.gif" alt="70.gif">
                    <img class="icon" src="./images/faces/71.gif" alt="71.gif">
                    <img class="icon" src="./images/faces/72.gif" alt="72.gif">
                    <img class="icon" src="./images/faces/73.gif" alt="73.gif">
                    <img class="icon" src="./images/faces/74.gif" alt="74.gif">
                    <img class="icon" src="./images/faces/75.gif" alt="75.gif">
                </div>
                <pre contenteditable="true"></pre>
                <button>发送</button>
            </div>
        </section>
    </main>
    <footer></footer>
    <script src="./scripts/jquery.js"></script>
    <script src="./scripts/copy_image.js"></script>
    <script src="./scripts/main.js"></script>
</body>
</html>
